<template>
  <div class="app-content dk-home-diy" style="--navbar-height: 0">
    <dk-page-diy ref="diy" :loading="loading" right-aside-width="300px" left-aside-width="320px" type="min">
      <el-button type="danger" @click="onClick()">页面配置</el-button>
      <el-button type="primary" @click="save()">保存</el-button>
      <el-button type="danger" @click="diy.clear()">清除</el-button>
      <el-button type="warning" @click="diy.showDiyCloud(pageName)">模板中心</el-button>
    </dk-page-diy>
    <dk-form ref="formRef" :is-dialog="true" :form-url="formUrl" @submit="submit"></dk-form>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import rules from '@/diy/rules'
import { getValue, setValue } from '@/api/config'

defineOptions({
  name: 'DkGoldDiy'
})

const props = defineProps({
  pageName: {
    default: '',
    type: String
  },
  menus: {
    default: () => {
      return [rules.common, rules.app]
    },
    type: Array
  }
})

const formUrl = {
  url: '/gs_gold/admin.config/getFormByKey?key=' + props.pageName,
  method: 'get'
}

const diy = ref()
const loading = ref(true)
const save = () => {
  const diyData = diy.value.get()
  setValue(props.pageName, diyData).then((res) => {})
}
const init = () => {
  getValue(props.pageName).then((res) => {
    diy.value.set(res.data)
    loading.value = false
  })
}

const formRef = ref()
const onClick = () => {
  formRef.value.show()
}
const submit = (form) => {
  console.log(form)
}
onMounted(() => {
  for (const menu of props.menus) {
    diy.value.addMenu(menu)
    diy.value.addComponent(menu.list)
  }
  init()
})
</script>

<style lang="scss">
.dk-home-diy {
  .dk-page-diy ._fc-l,
  .dk-page-diy ._fc-m,
  .dk-page-diy ._fc-r {
    height: calc(100vh - 120px) !important;
  }
  .el-tabs__content {
    height: calc(100vh - 180px) !important;
  }
}
</style>
